/**
 * 导航 create to by doujiabao - 20191210
 */

import React, { Component } from 'react'
import { withRouter, Link } from 'react-router-dom'

import cns from 'classnames'
import styles from './index.module.styl'

import routesMap from '@/router/routesMap'

import MaxComponent from '@/components/MaxComponent'
import MinComponent from '@/components/MinComponent'

const nav = [{
    path: routesMap.rankingList,
    title: '音乐排行榜top100'
}, {
    path: routesMap.randomRecommen,
    title: '随机推荐'
}]

class Navigation extends Component {
    render() {

        const { path } = this.props.match
        
        return (<MaxComponent style={{ background: '#fff' }}>

            <MinComponent>
                <ul className={styles.nav}>
                    {nav.map((itm, idx) => (<Link to={itm.path} key={idx}><li className={cns(
                        styles.navItem,
                        { [styles.active]: path === itm.path }
                    )}>{itm.title}</li></Link>))}
                </ul>
            </MinComponent>

        </MaxComponent>)
    }
}

export default withRouter(Navigation)